<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./fonts/icon-font.css" />
  <script src="./js/flexable.js"></script>
  <style>
    body {
      background-color: #fafafa;
    }

    .page-header-wrap {
      display: flex;
      align-items: center;
      padding: 0 .15rem;
      width: 100%;
      height: 1.3rem;
      background-image: url(./images/my-header-bg.png);
      background-size: 100% 1.3rem;
    }

    .avatar-img {
      width: .55rem;
      height: .55rem;
    }

    .avatar-img img {
      width: 100%;
      border-radius: 50%;
    }

    .go-login {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: .16rem;
      color: #c59a46;
      font-size: .16rem;
    }

    .go-login div:first-child {
      margin-bottom: .06rem;
      font-size: .18rem;
      font-weight: 700;
    }

    .my-asset {
      display: flex;
      background: #fff;
      padding: .22rem 0;
    }

    .my-asset .asset-left {
      display: flex;
      justify-content: space-around;
      flex: 1;
      border-right: 1px solid #eee;
    }

    .my-asset .asset-left .asset-left-item {
      display: flex;
      justify-content: center;
      flex-direction: column;
      font-size: .15rem;
      color: #666;
      max-width: 1.1rem;
      padding: 0 .06rem;
      text-align: center;
    }

    .my-asset .asset-left .asset-left-item div {
      font-size: .18rem;
      color: red;
      margin-bottom: .06rem;
    }

    .my-asset .asset-right {
      display: flex;
      justify-content: center;
      text-align: center;
      flex-direction: column;
      font-size: .15rem;
      color: #666;
      width: 1.1rem;
    }

    .my-asset .asset-right div {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 0.26rem;
      margin-bottom: .07rem;
    }

    .my-asset .asset-right div i {
      font-size: .26rem;
    }

    .nav-wrap {
      display: flex;
      margin: .11rem auto .11rem auto;
      padding: .11rem 0;
      width: 94%;
      box-shadow: 0 .005rem .02rem 0 rgba(0, 0, 0, .05);
      font-size: .16rem;
      border-radius: .02rem;
      background: #fff;
    }

    .order-nav .order-nav-item {
      width: 25%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
    }

    .order-nav .order-nav-item div {
      margin: 0 auto;
      padding: .05rem 0;
      color: #545454;
      font-size: .24rem;
    }

    .order-nav .order-nav-item div i {
      font-size: .24rem;
    }

    .order-nav .order-nav-item span {
      font-size: .15rem;
      color: #545454;
      text-align: center;
    }

    .my-service {
      flex-direction: column;
    }

    .my-service h3 {
      padding-left: .13rem;
      margin-bottom: .11rem;
      font-size: .16rem;
      font-weight: 400;
    }

    .my-service .my-service-nav {
      display: flex;
      flex-wrap: wrap;
    }

    .my-service .my-service-nav .my-service-nav-item {
      position: relative;
      width: 25%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      margin-bottom: .16rem;
    }

    .my-service-nav-item div {
      text-align: center;
      margin: 0 auto;
      padding: .07rem 0;
      color: #ff3800;
      font-size: .24rem;
    }

    .my-service-nav-item div i {
      font-size: .24rem;
    }

    .my-service-nav-item span {
      font-size: .15rem;
      color: #545454;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="page-header-my">
    <div class="page-header-wrap">
      <div class="avatar-img">
        <img src="./images/default-avatar.png" alt="">
      </div>
      <div class="go-login">
        <a href="./login.html">
          <div>未登录</div>
          <div>点击登录账号</div>
        </a>
      </div>
    </div>
  </div>
  <div class="my-asset">
    <div class="asset-left">
      <div class="asset-left-item">
        <div>--</div>
        <span>账户余额</span>
      </div>
      <div class="asset-left-item">
        <div>--</div>
        <span>积分</span>
      </div>
      <div class="asset-left-item">
        <div>--</div>
        <span>优惠券</span>
      </div>
    </div>
    <div class="asset-right">
      <div>
        <i class="iconfont icon-qianbao"></i>
      </div>
      <span>我的钱包</span>
    </div>
  </div>
  <div class="order-nav nav-wrap">
    <div class="order-nav-item">
      <div>
        <i class="iconfont icon-dingdan"></i>
      </div>
      <span>全部订单</span>
    </div>
    <div class="order-nav-item">
      <div>
        <i class="iconfont icon-qianbao"></i>
      </div>
      <span>待支付</span>
    </div>
    <div class="order-nav-item">
      <div>
        <i class="iconfont icon-daifahuo"></i>
      </div>
      <span>待发货</span>
    </div>
    <div class="order-nav-item">
      <div>
        <i class="iconfont icon-daishouhuo"></i>
      </div>
      <span>待收货</span>
    </div>
  </div>
  <div class="my-service nav-wrap">
    <h3>我的服务</h3>
    <div class="my-service-nav">
      <div class="my-service-nav-item">
        <div>
          <i class="iconfont icon-shouhuodizhi"></i>
        </div>
        <span>收货地址</span>
      </div>
      <div class="my-service-nav-item">
        <div>
          <i class="iconfont icon-lingquanzhongxin"></i>
        </div>
        <span>领券中心</span>
      </div>
      <div class="my-service-nav-item">
        <div>
          <i class="iconfont icon-youhuiquan"></i>
        </div>
        <span>优惠券</span>
      </div>
      <div class="my-service-nav-item">
        <div>
          <i class="iconfont icon-bangzhu"></i>
        </div>
        <span>我的帮助</span>
      </div>
      <div class="my-service-nav-item">
        <div>
          <i class="iconfont icon-jifen"></i>
        </div>
        <span>我的积分</span>
      </div>
      <div class="my-service-nav-item">
        <div>
          <i class="iconfont icon-shouhou"></i>
        </div>
        <span>退货/售后</span>
      </div>
    </div>
  </div>
  <div class="tabbar-nav">
    <a href="./index.html">
      <i class="iconfont icon-shouye"></i>
      <p>首页</p>
    </a>
    <a href="./cate.html">
      <i class="iconfont icon-fenlei"></i>
      <p>分类</p>
    </a>
    <a href="./car.html">
      <i class="iconfont icon-gouwuche"></i>
      <p>购物车</p>
    </a>
    <a href="./my.html">
      <i class="iconfont icon-wode"></i>
      <p>我的</p>
    </a>
  </div>
</body>

</html>